@rem: 50rem;
.wrap{
  width: 100%;
  height: 100%;
  background: #fff;
}
.header{
  width: 100%;
  height: 100/@rem;
  .nav{
    width: 100%;
    height: 100/@rem;
    padding: 14/@rem 68/@rem 0;
    border-bottom: 1/@rem solid #d1d1d1;
    .navList{
      float: left;
      padding: 0 5/@rem;
      font-size: 30/@rem;
      line-height: 82/@rem;
      margin-right: 170/@rem;
      color: #666;
    }
    .navList:last-child{
      margin-right: 0;
    }
    .navActive{
      color: #4996f2;
      border-bottom: 4/@rem solid #4996f2;
    }
  }
}
.con{
  width: 100%;
  height: auto;
  .content{
    width: 100%;
    display: none;
    .itemWrap{
      width: 100%;
      height: auto;
      background: #f3f8ff;
      padding-top: 30/@rem;
      padding-left: 56/@rem;
      .item{
        float:left;
        width: 170/@rem;
        height: 80/@rem;
        line-height: 80/@rem;
        text-align: center;
        font-size: 30/@rem;
        color: #4996f2;
        border: 1/@rem solid #4996f2;
        margin-right: 50/@rem;
        -webkit-border-radius: 8/@rem;
        -moz-border-radius: 8/@rem;
        border-radius: 8/@rem;
        margin-bottom: 30/@rem;
      }
      .item:last-child{
        margin-right: 0;
      }
      .itemActive{
        color: #fff;
        background: #4996f2;
      }
    }
    .contentWrap{
      width: 700/@rem;
      height: 756/@rem;
      padding: 40/@rem 25/@rem;
      border: 3/@rem solid #d5d5d5;
      position: relative;
      overflow: hidden;
      margin: 25/@rem auto;

    }
  }
  #conLeida{
    .contentWrap{
      #iframePageLeida{
        width: 100%;
        height: 100%;
        position: relative;
      }
      .iframeLeft{
        left: -180/@rem;
      }
      .maskTop{
        width: 105%;
        height: 130/@rem;
        position: absolute;
        left: -50/@rem;
        top: 0;
        background: #fff;
        z-index: 5;
      }
      .maskRight{
        width: 210/@rem;
        height: 980/@rem;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        z-index: 6;
      }
      .maskBottom{
        width: 105%;
        height: 185/@rem;
        position: absolute;
        left: -50/@rem;
        bottom: 0;
        background: #fff;
        z-index: 7;
      }
      .maskFooter{
        height: 300/@rem;
      }
      .maskFoot{
        height: 180/@rem;
      }
    }
    .maskTwo{
      .maskTop{
        height: 265/@rem;
      }
      .maskRight{
        display: none;
      }
      .maskBottom{
        height: 250/@rem;
      }
    }
    .maskNone{
      .maskTop{
         display: none;
      }
      .maskRight{
        display: none;
      }
      .maskBottom{
        display: none;
      }
    }
  }
  #conCloud{
    .contentWrap{
      #iframePageCloud{
        width: 100%;
        height: 100%;
        position: relative;
      }
      .iframeLeft{
        left: -180/@rem;
      }
      .maskTop{
        width: 105%;
        height: 130/@rem;
        position: absolute;
        left: -50/@rem;
        top: 0;
        background: #fff;
        z-index: 5;
      }
      .maskRight{
        width: 210/@rem;
        height: 980/@rem;
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        z-index: 6;
      }
      .maskBottom{
        width: 105%;
        height: 190/@rem;
        position: absolute;
        left: -50/@rem;
        bottom: 0;
        background: #fff;
        z-index: 7;
      }
      .maskFoot{
        height: 180/@rem;
      }
    }
    .maskTwo{
      .maskTop{
        height: 265/@rem;
      }
      .maskRight{
        display: none;
      }
      .maskBottom{
        height: 265/@rem;
      }
    }
    .maskNone{
      .maskTop{
        display: none;
      }
      .maskRight{
        display: none;
      }
      .maskBottom{
        display: none;
      }
    }
    .maskThree{
      #iframePageCloud{
        top: -50/@rem;
        left: -280/@rem;
      }
      .maskTop{
        height: 100/@rem;
      }
      .maskRight{
        width: 210/@rem;
      }
      .maskBottom{
        height: 200/@rem;
      }
    }
    .maskFour{
      #iframePageCloud{
        left: -420/@rem;
      }
      .maskTop{
        height: 160/@rem;
      }
      .maskRight{
        width: 200/@rem;
      }
      .maskBottom{
        height: 370/@rem;
      }
    }
    .maskFive{
      #iframePageCloud{
        top: -245/@rem;
        left: -270/@rem;
      }
      .maskTop{
        height: 100/@rem;
      }
      .maskRight{
        display: none;
      }
      .maskBottom{
        height: 250/@rem;
      }
    }
  }
  #conShuzhi{
    #firsNav{
      margin-bottom: 20/@rem;
    }
    .itemWrap{
      .item{
        width: auto;
        height: 80/@rem;
        line-height: 80/@rem;
        padding: 0 20/@rem;
        font-size: 24/@rem;
      }
    }
    #itemWrapShuzhi{
      .item{
        margin-right: 50/@rem;
        margin-bottom: 20/@rem;
      }
      .item:nth-child(3){
        margin-right: 0;
      }
    }
    .contentWrap{
      height: auto;
      min-height: 756/@rem;
      #iframePageShuzhi{
        width: 100%;
        height: 676/@rem;
        margin-bottom: 40/@rem;
      }
      #iframePageShuzhi2{
        display: none;
        width: 100%;
        height: 676/@rem;
      }
    }
  }
  .conActive{
    display: block;
  }
}